<template>
	<view class="me-goods-list">
		<view :id="'num'+item.id" class="good-li" v-for="(item,key) in list" :key="key">
			<image class="good-img" :src="item.goodImg" mode="widthFix"/>
			<view class="flex-item">
				<view class="good-name">{{item.goodName}}</view>
				<text class="good-price">{{item.goodPrice}} 元</text>
				<text class="good-sold">已售{{item.goodSold}}件</text>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * 1、刷新：如果在此页面需要控制刷新当前tab数据则可调用父页面的这个函数：this.$emit('refreshTab');【更多使用方法请移步至源函数查阅】
 * 2、如果需要获取当前tab序号则用：this.tabindex
 * 注：特别注意此页面无生命周期，以及无法使用原生组件，原生组件和fixed元素需要写在mescroll-uni的外面 否则滚动列表会抖动（但使用uView这些组件是没问题的）
 */
export default {
    props:{
        //数据列表
        list: {
            type: Array,
            default(){
                return []
            }
        },
        //当前tab的标识ID
        tabindex: {
            type: [String,Number],
            default: ''
        },
    }
}
</script>

<style lang="scss">
.me-goods-list{
	background-color: #fff;
	
	.good-li{
		display: flex;
		align-items: center;
		padding: 20upx;
		border-bottom: 1upx solid #eee;
		
		.good-img{
			width: 160upx;
			height: 160upx;
			margin-right: 20rpx;
		}
		
		.flex-item{
			flex: 1;
			
			.good-name{
				font-size: 26upx;
				line-height: 40upx;
				height: 80upx;
				margin-bottom: 20upx;
				overflow: hidden;
			}
			.good-price{
				font-size: 26upx;
				color: red;
			}
			.good-sold{
				font-size: 24upx;
				margin-left: 16upx;
				color: gray;
			}
			
		}
	}
}
</style>
